<template>
    <!-- pages/maker/bonusToday/index.wxml -->
    <view class="custom-class mt-20 title-class">
        <view class="flexs justify-between item-ft4">
            <text>创客信息</text>
            <text>累计业绩</text>
        </view>
        <block v-if="dataList.length > 0">
            <view :class="'flexs justify-between item-ft4 item-ft5 ' + (item.isYou == 1 ? 'item-bg' : '')" :data-item="item" v-for="(item, index) in dataList" :key="index">
                <image :src="item.path"></image>

                <text>{{ item.nickname }}</text>

                <text>{{ item.performanceNum }}</text>
            </view>
        </block>
        <block v-else>
            <view class="item-empty">
                <image :src="iconEmpt" mode="aspectFit"></image>
                <text>暂未有传奇创客达标，要加油了哦～</text>
            </view>
        </block>
    </view>
</template>

<script>
// pages/maker/bonusToday/index.js
import _request from '../../../utils/request.js';
const app = getApp();
export default {
    data() {
        return {
            dataList: [],
            type: 1,
            page: 1,
            totalRecords: 0,
            iconEmpt: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2022-05-24/f1a73ad578b0444386fc0e76964e8ad4-files'
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            type: options.type
        });
        this.getList();

        if (options.type == 3) {
            uni.setNavigationBarTitle({
                title: '本月达标人数'
            });
        } else if (options.type == 2) {
            uni.setNavigationBarTitle({
                title: '本周达标人数'
            });
        } else {
            uni.setNavigationBarTitle({
                title: '本日达标人数'
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData({
            page: 1
        });
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: ++this.page
        });

        if (this.dataList.length < this.totalRecords) {
            this.getList();
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getList() {
            _request
                .get(
                    '/maker/bonusPool/infoPage',
                    {
                        userId: uni.getStorageSync('userid'),
                        type: this.type,
                        page: this.page,
                        size: 15
                    },
                    app.globalData.userType
                )
                .then((res) => {
                    if (res.data) {
                        let list = res.data.data.rows || [];
                        this.setData({
                            dataList: this.page == 1 ? list : [...this.dataList, ...list],
                            totalRecords: res.data.data.totalRecords || 0
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/maker/bonusToday/index.wxss */
.title-class {
    font-size: 16px;
    background: white;
}
.item-ft4 text {
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: 14px;
    padding: 20rpx;
}
.item-ft4 text:first-child {
    justify-content: start;
    margin-left: 10rpx;
}
.item-ft5 {
    margin: 0 30rpx;
}
.item-ft5 text {
    justify-content: start;
    color: #666666;
}
.item-ft5 text:last-child {
    justify-content: center;
}
.item-ft5 image {
    margin-top: 10rpx;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    overflow: hidden;
}
.item-ft5:not(:last-child) {
    border-bottom: 1px solid #f8f8f9;
}
.item-bg {
    background: #ffecdc;
}

.item-empty {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item-empty image {
    height: 120px;
}
.item-empty text {
    text-align: center;
    color: #999999;
}
</style>
